<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('消课班级')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form class="form-horizontal m" id="form-schedule-edit">
                <input name="scheduleId" th:field="*{teachingClassesSchedule.scheduleId}" type="hidden">
                <input name="status" value="1" type="hidden">
                <div class="form-group">
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">上课日期：</label>
                        <div class="col-sm-6">
                            <div class="form-control"
                                 th:text="${#dates.format(teachingClassesSchedule.startDate, 'yyyy-MM-dd')}"></div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">上课时间段：</label>
                        <div class="col-sm-6">
                            <div class="form-control">[[*{teachingClassesSchedule.startTime}]]-[[*{teachingClassesSchedule.endTime}]]
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">上课老师：</label>
                        <div class="col-sm-6">
                            <input class="form-control" th:field="*{teachingClassesSchedule.teacherName}">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">老师课时：</label>
                        <div class="col-sm-3" style="width: 60px">
                            <div class="form-control" th:text="*{teachingClasses.teacherIncrease}"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <div class="form-control">[[*{teachingClassesSchedule.remark}]]</div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="tabs-container" style="padding-top: 20px;">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">学生记上课</a>
                    </li>
                </ul>
                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-success">
                        <i class="fa fa-plus"></i> 添加临时学员
                    </a>
                </div>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
<!--                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i-->
<!--                        class="fa fa-check"></i>保 存-->
<!--                </button>&nbsp;-->
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭
                </button>
            </div>
        </div>
    </div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">
    var classId = [[${teachingClassesSchedule.classId}]];
    var className = [[${teachingClassesSchedule.className}]];
    var scheduleId = [[${teachingClassesSchedule.scheduleId}]];
    var startDate = [[${teachingClassesSchedule.startDate}]];
    var startTime = [[${teachingClassesSchedule.startTime}]];
    var endTime = [[${teachingClassesSchedule.endTime}]];
    var teacherId = [[${teachingClassesSchedule.teacherId}]];
    var teacherName = [[${teachingClassesSchedule.teacherName}]];
    var courseId = [[${teachingClassesSchedule.courseId}]];
    var schoolId = [[${teachingClassesSchedule.schoolId}]];
    var removeFlag = [[${@permission.hasPermi('teaching:record:remove')}]];

    var data1 = [[${@dict.getType('sys_attend_status')}]];

    $(function () {
        var options = {
            url: ctx + "teaching/record/list",
            queryParams: {scheduleId: scheduleId},
            modalName: "记上课学员",
            removeUrl: ctx + "teaching/record/removeOne/{id}",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            columns: [{
                checkbox: false,
                visible: false
            },
                {
                    field: 'recordId',
                    title: '主键ID',
                    visible: false
                },
                {
                    field: 'applyId',
                    title: '报课ID',
                    visible: false
                },
                {
                    field: 'classStudentId',
                    title: '班级学生ID',
                    visible: false
                },
                {
                    field: 'classId',
                    title: '班级ID',
                    visible: false
                },
                {
                    field: 'className',
                    title: '班级名称',
                    visible: false
                },
                {
                    field: 'schoolId',
                    title: '学校ID',
                    visible: false
                },
                {
                    field: 'studentName',
                    title: '学生姓名',
                },
                {
                    field: 'teachingStudentApply.lessonRemain',
                    title: '剩余课时',
                },
                {
                    field: 'leaveCount',
                    title: '请假次数',
                },
                {
                    field: 'lessonConsume',
                    title: '本次扣课时',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' style='width: 50px' type='number' name='lessonConsume' id='lessonConsume' value='%s'>", value);
                        html += $.common.sprintf("<input type='hidden' name='lessonConsume1' value='%s'>", row.teachingClasses.studentConsume);
                        html += $.common.sprintf("<input type='hidden' name='status' value='%s'>", row.status);
                        html += $.common.sprintf("<input type='hidden' name='leaveCount' value='%s'>", row.leaveCount);
                        html += $.common.sprintf("<input type='hidden' name='applyId' value='%s'>", row.applyId);
                        html += $.common.sprintf("<input type='hidden' name='claRecordId' value='%s'>", row.claRecordId);
                        if (row.status == 0) {
                            return value;
                        } else if (row.status == 1) {
                            return html;
                        }
                    }
                },
                {
                    field: 'attendStatus',
                    title: '到课状态',
                    formatter: function (value, row, index) {
                        var data = [{index: index, type: value}];
                        if (row.status == 0) {
                            return $.table.selectDictLabel(data1, value);
                        } else if (row.status == 1) {
                            return $("#attendStatus").tmpl(data).html();
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.status == 0) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="change(' + row.recordId + ')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(' + row.recordId + ')"><i class="fa fa-remove"></i>删除</a>');
                        } else if (row.status == 1) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="edit(this,' + row.recordId + ')"><i class="fa fa-save"></i>保存</a> ');
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="cancel(' + row.recordId + ')"><i class="fa fa-remove"></i>取消</a> ');
                        }

                        return actions.join('');
                    }
                }
            ],
        };
        $.table.init(options);
    });

    function edit(obj, recordId) {
        var status = 0;
        var tr = $(obj).parent().parent();
        var lessonConsume = $(tr).find("input[name=lessonConsume]").val();
        var attendStatus = $(tr).find("select").val();
        var leaveCount = parseInt($(tr).find("input[name=leaveCount]").val());
        var applyId = $(tr).find("input[name=applyId]").val();
        var claRecordId = $(tr).find("input[name=claRecordId]").val();
        if (leaveCount == 0 && attendStatus == 1) {
            leaveCount++;
        } else if (leaveCount > 0 && attendStatus != 1) {
            leaveCount--;
        }
        $.ajax({
            type: "post",
            url: ctx + "teaching/record/editRecord",
            data: {
                "recordId": recordId,
                "status": status,
                "lessonConsume": lessonConsume,
                "attendStatus": attendStatus,
                "leaveCount": leaveCount,
                "applyId": applyId,
                "claRecordId": claRecordId,
            }, success: function () {
                $.table.refresh();
            }
        })
    }

    function cancel(recordId) {
        var status1 = 0;
        $.ajax({
            type: "post",
            url: ctx + "teaching/record/edit",
            data: {
                "recordId": recordId,
                "status": status1,
            }, success: function () {
                $.table.refresh();
            }
        })
    }

    function change(recordId) {
        var status1 = 1;
        $.ajax({
            type: "post",
            url: ctx + "teaching/record/edit",
            data: {
                "recordId": recordId,
                "status": status1,
            }, success: function () {
                $.table.refresh();
            }
        })

    }


    /**
     * 根据到课状态 选择 消耗课时
     * @param obj
     */
    function selectMe(obj) {
        var initConsume = $(obj).parent().prev().find("input[name='lessonConsume1']").val();
        var iptConsume = $(obj).parent().prev().find("input[name='lessonConsume']");
        if ($(obj).val() == 0) {
            iptConsume.val(initConsume);
        } else if ($(obj).val() == 1) {
            iptConsume.val(0);
        } else if ($(obj).val() == 2) {
            iptConsume.val(initConsume);
        }
        console.log($(obj).val());
    }

</script>
</body>
</html>

<script id="attendStatus" type="text/x-jquery-tmpl">
<div>
<select onChange="selectMe(this)"  name="attendStatus[${index}].type" class="form-control" th:with="type=${@dict.getType('sys_attend_status')}" style="width: 80px">
    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>




















</script>